<template>
  <div class="wh100">
    <olMap ref="olMap" @initMap="initMap"></olMap>
  </div>
</template>

<script>
import olMap from '@/components/ol-map'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {get as olProjGet, transform} from 'ol/proj'
import TileGrid from "ol/tilegrid/TileGrid";
import {TileImage} from "ol/source";
import {Cluster, Vector as VectorSource, XYZ} from 'ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style'
import {LineString, Point, Polygon} from 'ol/geom.js';
import Feature from 'ol/Feature.js';
import {BD09toWGS84} from '@/components/ol-map/projection/coordinateTransforms/coordinate-transformation'

export default {
  name: "MapPanos",
  components: {
    olMap
  },
  computed: {
    gisIns() {
      return this.$refs.olMap.gisIns
    },
    map() {
      return this.$refs.olMap.map
    }
  },
  methods: {
    initMap() {
      this.map.removeLayer(this.gisIns.getLayer('arcgis'))
      var projection = olProjGet("EPSG:3857");
      var resolutions = [];
      for (var i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }
      var tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions
      });

      var baidu_source = new TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
          if (!tileCoord) {
            return "";
          }
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = -tileCoord[2] - 1;
          if (x < 0) {
            x = "M" + (-x);
          }
          if (y < 0) {
            y = "M" + (-y);
          }
          // return 'https://gss0.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=vtile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&scaler=2&udt=20231212'
          return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
        }
      });


      var baidu_layer = new TileLayer({
        source: baidu_source
      });
      console.log(baidu_layer)
      this.map.addLayer(baidu_layer)
    }
  }
}
</script>

<style scoped>

</style>
